<!-- 资源库页面 -->
<template>
	<view class="repository">
		<!-- 轮播图布局 -->
		<view class="slideshow">
			<!-- 轮播图 -->
			<view class="swiper">
				<u-swiper :height="326" border-radius="0" :width="750" :list="Liimg" mode="none"></u-swiper>
			</view>
			<view class="reg_searchs">
				<view class="reg_search" >
					<u-search v-model="searchKey" :height="64" :placeholder="$t('请输入您想要查找的内容')" :show-action="false"
						bg-color="#FFFFFF" :borderColor="'#fba062'" @search="doSearch"></u-search>
				</view>
			</view>
			

		</view>
		<!-- 下拉菜单 -->
		<view >
			<u-dropdown ref="uDropdown" active-color="#FF9136">
				<u-dropdown-item :title="$t('地区')" >
					<view class="region">
						<view class="country">
							<!--              国家-->
							<u-cell-group :border="false">
								<u-cell-item v-for="(i,j) in area" :key="j" :arrow="false" :title="i.label"
									:title-style="{ fontSize: '21rpx', color: isCountry(i.value) }"
									bg-color="#F3F3F3"
									@click="countryClick(i.value, i.children,i.label)"></u-cell-item>
							</u-cell-group>
						</view>
						<view class="province">
							<scroll-view scroll-y style="height: 100%;">
								<u-cell-group :border="false">
									<u-cell-item v-for="(i,j) in province" :key="j" :arrow="false" :title="i.label"
										:title-style="{ fontSize: '21rpx', color: isProvince(i.value) }"
										bg-color="#F3F3F3"
										@click="provinceClick(i.value, i.children,i.label)"></u-cell-item>
								</u-cell-group>
							</scroll-view>
						</view>
						<view style="flex: 3;">
							<scroll-view scroll-y style="height: 100%;">
								<view class="city">
									<view v-for="(i,j) in city" :key="j" :class="[classCity(i.value)]"
										@click="cityClick(i.value, i.label)">
										{{ i.label }}
									</view>
								</view>
							</scroll-view>
							>
						</view>
					</view>
				</u-dropdown-item>
				<!--        类目-->
				<u-dropdown-item :title="$t('身份')" :height="108" >
					<view class="region">
						<view class="country">
							<!--              国家-->
							<scroll-view scroll-y style="height: 100%;">
								<u-cell-group :border="false">
									<u-cell-item v-for="(i,j) in identityList" :key="j" :arrow="false"
										:title="i[$t('item.name')]"
										:title-style="{ fontSize: '21rpx', color: isOne(i.value) }"
										bg-color="#F3F3F3"
										@click="oneClick(i.value, i.children,i[$t('item.name')])"></u-cell-item>
								</u-cell-group>
							</scroll-view>
						</view>
						<view class="province">
							<scroll-view scroll-y style="height: 100%;">
								<u-cell-group :border="false">
									<u-cell-item v-for="(i,j) in resource_library" :key="j" :arrow="false"
										:title="i[$t('item.label')]"
										:title-style="{ fontSize: '21rpx', color: isTwo(i.value) }"
										bg-color="#F3F3F3"
										@click="twoClick(i.value, i.children,i[$t('item.name')])"></u-cell-item>
								</u-cell-group>
							</scroll-view>
						</view>
					</view>
				</u-dropdown-item>
			</u-dropdown>
		</view>
		<!-- 详情布局 -->
		<view class="conent" >
			<!-- 单个盒子内容 -->
			<view v-for="(item, index) in list" :key="index">
				<view class="reg_block" @click.native="to(item.id)">
					<view class="reg_block_images">
						<image style="width: 100rpx;height: 100rpx;border-radius: 100rpx;" :src="IMAGE_URL+item.avatar" mode=""></image>
						<view class="reg_block_right">
							<view style="font-size: 26rpx;">{{lang=='zh'?item.username:item.username_ru}}</view>
							<view style="display: flex;align-items: center;height: 24rpx;font-size: 22rpx;margin-top: 14rpx;">
								<u-image width="23rpx" mode="scaleToFill" height="23rpx" :src="HTTP_IMG_UTL + 'agencyIcon3.png'"/>
								<view style="margin-left: 10rpx;">{{lang=='zh'?item.mergename?item.item.mergename:$t('暂无信息'):item.mergename_ru?item.mergename_ru:$t('暂无信息')}}</view>
							</view>
						</view>
						<view class="reg_block_detail">
							<image style="width: 10rpx;height: 18rpx;" src="@/static/1102@1x.png" mode=""></image>
							<image style="width: 10rpx;height: 18rpx;" src="@/static/1102@1x.png" mode=""></image>
						</view>
					</view>
					<view class="reg_jishi" @click.stop="handeleGo(item.mobile)">{{$t('即时沟通')}}</view>
				</view>
				<!-- <RepositoryItem :item="item" :type="type" @click.native="to(item.id)"></RepositoryItem> -->
			</view>
		</view>
		<Service />
	</view>
</template>

<script>
	import {
		createC2CConversation,
		isBase64,
		time
	} from "@/common/public";
	import {
		ImageUrl
	} from "@/common/public";
	import {
		IMAGE_URL,
		HTTP_IMG_UTL
	} from '@/config/app';
	import Service from "@/components/service/service.vue";
	import RepositoryItem from "@/components/detail/RepositoryItem.vue";

	export default {
		components: {
			Service,
			RepositoryItem
		},
		data() {
			return {
				HTTP_IMG_UTL,
				lang: this.$i18n.locale,
				IMAGE_URL,
				menu: null, //判断是打开那个下拉
				//地区
				area: [],
				province: [],
				city: [],
				urbanization: '',
				oreder: '', //拿到的数据
				// 评分下拉的数据
				// score: [],
				score: [{
						label: this.$t("正序"),
						value: "ASC",
					},
					{
						label: this.$t("倒序"),
						value: "DESC",
					}
				],
				// 按钮样式
				customStyle: {
					width: '656rpx',
					height: '63rpx',
					background: 'linear-gradient(110deg, #DD2910 0%, #F79B29 100%)',
					'border-radius': '26rpx',
				},
				value2: 2,
				options2: [{
						label: '去冰',
						value: 1,
					},
					{
						label: '加冰',
						value: 2,
					},
				],
				// ；轮播图图片
				Liimg: [],
				//用户信息
				list: [],
				resource_library: [], //类目
				countryCurrent: null,
				category: "", //类目
				integral: "", //评分
				currentCity: "", //城市
				type: 1,
				page: 2, //分页数据
				identityList: [], //身份
				one: '', //一级类目身份
				two: '', //二级类目
				currentCity: '',

				//搜索
				searchKey: "",
			};
		},
		onLoad(options) {
			if (options.currentCity) {
				this.type = options.type
			}
			if (options.currentCity) {
				this.currentCity = options.currentCity
			}
			if (options.resource_id) {
				this.two = options.resource_id
			}


			this.getLibraryLists({
				//type: this.type,
				area: this.currentCity,
				category_id: this.two
			})



			this.getareaOptions()
			// this.getAxios()
			this.getIdentityList()
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.$t("资源库")
			})
		},

		// 上拉加载数据分页
		onReachBottom() {
			this.$u.api.collection.getLibraryList({
				page: this.page,
				searchKey: this.searchKey
			}).then(res => {
				console.log(res);
				if (res.list.length <= 0) {
					this.$u.toast(this.$t('没有数据了'))
				} else {
					this.list = [...this.list, ...res.list]
					this.page++
				}
			})
		},

		methods: {
			handeleGo(mobile){
				createC2CConversation(mobile, this)
			},
			ImageUrl,
			getIdentityList() {
				const that = this
				// 这里取了两次身份，因为想要获取全部身份信息，还没有后台配合
				that.$u.api.basic.getIdentityList({
					country: '0',
				}).then(res => {
					that.identityList = res
					that.$u.api.basic.getIdentityList({
						country: '1',
					}).then(res => {
						that.identityList = [...that.identityList, ...res]
					}).catch(err => {
						console.log('getIdentityList-err', err);
					});

				}).catch(err => {
					console.log('getIdentityList-err', err);
				});

			},

			doSearch(val) {
				uni.showLoading({
					title: 'loading...'
				});
				setTimeout(() => {
					uni.hideLoading()
				}, 3000)
				this.searchKey = val
				this.page = 1
				this.list = []
				this.$u.api.collection.getLibraryList({
					area: this.currentCity || "",
					category_id: this.two || "",
					score: this.score.filter(item => item.value === this.integral)[0]?.label || "",
					page: this.page,
					searchKey: this.searchKey
				}).then(res => {
					console.log('资源库数据:',res);
					if (res.list.length <= 0) {
						this.$u.toast(this.$t('没有数据了'))
					} else {
						this.list = res.list
					}
				})
			},
			oneClick(value, children, label) {
				this.one = value;
				this.getIdentityCategory()
			},
			twoClick(value, children, label) {
				this.two = value;
				this.$refs.uDropdown.close();
				this.closes()
			},
			getIdentityCategory() {
				const that = this
				that.$u.api.basic.getIdentityCategory({
					identity_id: that.one || '',
				}).then(res => {
					that.resource_library = res
					that.resource_library.unshift({
						label: '不限',
						label_ru: this.$t('不限'),
						value: ''
					})
				}).catch(err => {
					console.log('getIdentityCategory-err', err);
				});
			},
			getLibraryLists(data) {
				this.list = []
				this.Liimg = []
				this.$u.api.collection.getLibraryList(data).then(res => {
					this.list = res.list
					res.banners.forEach(item => {
						this.Liimg.push({
							image: ImageUrl(item.image)
						})
					})
					console.log(this.list);
				})
			},
			//统一发送请求
			getAxios() {
				this.getActionSheetLists({
					type: "resource_library"
				})
				// this.getActionSheetLists({type: "score"})
			},
			//获取城市信息
			getareaOptions() {
				this.$u.api.basic.getSelectCityList({
					is_port: true
				}).then(res => {
					this.area = res
				})
			},
			//获取类目信息
			getActionSheetLists(data = {
				type: "resource_library"
			}) {
				this.$u.api.basic.getActionSheetList(data).then(res => {
					if (data.type === "resource_library") {
						res.forEach(item => {
							this[data.type].push({
								label: item.name,
								label_ru: item.name_ru,
								value: item.id
							})
						})
						return
					}
					if (data.type === "score") {
						res.forEach((item, index) => {
							this.score.push({
								label: item.join("-"),
								label_ru: item.join("-"),
								value: index + 1,
							})
						})
					}

				})
			},
			cityClick(id, city) {
				this.currentCity = city
				//城市信息(默认不限)
				this.cityCurrent = id
				console.log("当前城市", this.currentCity, this.two, this.score.filter(item => item.value === this.integral)[0]
					?.label || "--");
				//获取分类
				this.getLibraryLists({
					area: this.currentCity,
					category_id: this.two,

					score: this.score.filter(item => item.value === this.integral)[0]?.label || ""
				})
				this.$refs.uDropdown.close();
				this.closes()
			},
			provinceClick(id, children, label) {
				this.city = []
				this.city = children
				this.provinceCurrnet = id
				console.log("当前省分", this.city, this.two, this.score.filter(item => item.value === this.integral)[0]
					?.label || "--");


				//获取分类
				this.getLibraryLists({
					area: label,
					category_id: this.two,
					score: this.score.filter(item => item.value === this.integral)[0]?.label || ""
				})
			},
			//国家
			countryClick(id, children, label) {
				this.province = []
				this.city = []
				this.province = children
				this.countryCurrent = id
				// console.log("当前国家",this.province,this.category,this.score.filter(item => item.value === this.integral)[0]?.label || "--");



				//获取分类
				this.getLibraryLists({
					area: label,
					category_id: this.two,
					score: this.score.filter(item => item.value === this.integral)[0]?.label || ""
				})
				// this.$refs.uDropdown.close();
				// this.closes()
			},
			open(index) {
				this.$refs.uDropdown.highlight();
				this.menu = index
			},
			//关闭
			closes() {
				//获取分类
				//       console.log(this.currentCity, this.score)
				this.getLibraryLists({
					area: this.currentCity,
					category_id: this.two,
					score: this.score.filter(item => item.value === this.integral)[0]?.label || ""
				})
			},
			// 查看详情跳转
			to(id) {
				this.$u.route({
					url: "/pages/index/detail/detail",
					params: {
						id: id,
						type: 1,
						releaseType: 'resource'
					}
				})

			},
			// 下拉菜单的确定按钮
			closeDropdown() {
				this.urbanization = ''
				this.oreder = ''
				this.$refs.uDropdown.close()
			},
			// 获取数据
			count(item, index) {
				this.urbanization = index
				if (this.menu == 0) {

					this.oreder = item.region
				}
				if (this.menu == 2) {
					this.oreder = item.count

				}
			},
		},
		computed: {
			classCity() {
				return (id) => {
					return this.cityCurrent === id ? 'currCity' : ''
				}
			},
			isProvince() {
				return (id) => {
					return this.provinceCurrnet === id ? "#EF692A" : ""
				}
			},
			isOne() {
				return (id) => {
					return this.one === id ? "#EF692A" : ""
				}
			},
			isTwo() {
				return (id) => {
					return this.two === id ? "#EF692A" : ""
				}
			},
			isCountry() {
				return (id) => {
					return this.countryCurrent === id ? "#EF692A" : ""
				}
			},
			taxon() {
				return (value) => {
					if (this.menu == 0) {
						return this.urbanization === value ? 'erea' : ''
					}
					if (this.menu == 2) {
						return this.urbanization === value ? 'bianse' : ''
					}

				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.reg_jishi{
		width: 100%;
		height: 55rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 0px 0px 16rpx 16rpx;
		background: linear-gradient(93deg, #FF8C7B 16%, #FFD1A2 99%);
		font-size: 26rpx;
	}
	.reg_block_detail{
		width: 99rpx;
		height: 39rpx;
		border-radius: 0px 16rpx 0px 16rpx;
		background: #3D3D3D;
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.reg_block_right{
		flex: 1;
		width: 100%;
		height: 100%;
		// background-color: #000000;
		margin-left: 18rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.reg_block_images{
		width: 100%;
		min-height: 160rpx;
		padding: 35rpx 20rpx 25rpx 20rpx;
		display: flex;
		align-items: center;
		position: relative;
	}
	.reg_block{
		width: 690rpx;
		min-height: 200rpx;
		border-radius: 16rpx;
		background-color: #FFFFFF;
		margin-bottom: 12rpx;
	}
	.reg_dropdown{
		width: 100%;
		height: 88rpx;
		display: flex;
		align-items: center;
		background-color: #F6F6F6;
	}
	.reg_search{
		width: 690rpx;
	}
	.reg_searchs{
		width:100%;
		position: absolute;
		top: 246rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		
	}
	uni-page-body {
		height: 100%;
	}

	.slideshow {
		height: 308rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between
	}

	.swiper {
		
	}

	.repository {
		// height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #F6F6F6;
		
	}

	.Carousel {
		width: 100%;
		display: flex;
		justify-content: center
	}

	.conent {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.introduce {
		width: 100%;
		min-height: 237rpx;
		background-color: #ffffff;
		margin-top: 20rpx;
		border-radius: 30rpx;
		display: flex;
		justify-content: space-between;
		position: relative;

		.headline_img {
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
			margin-left: 19rpx;
			margin-right: 28rpx;
			float: left;
		}

		.headline {
			margin-top: 20rpx;
			// height: 50rpx;
			display: flex;
			// justify-content: space-evenly;
			align-items: center;

			view {
				font-size: 30rpx;
				font-weight: 600;
				color: #0B0B0B;
				line-height: 35rpx;
				flex: 1;
				word-wrap: break-word;
			}

			.rahmen {
				display: flex;
				height: 50rpx;
				align-items: center;
				justify-content: space-evenly;
				overflow: hidden;

				.tp {
					width: 34rpx;
					height: 34rpx;
					border-radius: 50%;
					margin-left: 10rpx;
				}
			}
		}

		.examine {
			margin: 26rpx 26rpx 0 0;
			font-size: 24rpx;
			font-weight: 500;
			color: #717171;
			line-height: 35rpx;
			word-break: break-all;
			position: absolute;
			top: 0;
			right: 0;
		}
	}

	.conent {
		.introduce:last-child {
			margin-bottom: 60rpx;
		}
	}

	.industry {
		margin-left: 23rpx;
		padding-bottom: 30rpx;

		._ind {
			word-wrap: break-word;
			display: inline;
			margin-left: 20rpx;
			color: #737373;
			flex: 1;
			padding-right: 20rpx;
		}
	}

	.bj {
		vertical-align: middle;
	}

	.location {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}

	.flex {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.score {
		width: 100%;
		height: 450rpx;

		.count {

			li {
				margin: 0 45rpx 0 27rpx;
				padding-left: 24rpx;
				height: 61rpx;
				width: calc(100% - 72rpx);
				font-size: $my-font-size21;

				font-weight: 400;
				color: #000000;
				line-height: 30rpx;
				display: flex;
				align-items: center;
				border-bottom: 2px solid #EFEFEF;
			}
		}
	}

	ol {

		padding: 0;
		list-style-type: none;

	}

	.slot-content {
		background-color: #FFFFFF;
		height: 560rpx;
		display: flex;
		flex-direction: column;
	}

	.button {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bianse {
		color: orange !important;
	}

	.region {
		width: 100%;
	}

	.selected {
		text-align: center;
		font-size: $my-font-size21;

		font-weight: 400;
		color: #000000;
		line-height: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #E9E9E9;
	}

	.city {
		li {
			height: 60rpx;
			width: 281rpx;
			background: #F3F3F3;
			text-align: center;
			line-height: 60rpx;
			font-size: $my-font-size21;

			font-weight: 400;
			color: #000000;
			border-bottom: 2rpx solid #CCCCCC;
			box-sizing: border-box;
		}
	}

	.erea {
		color: #F47F37 !important;
		border-bottom: 2px solid #F47F37 !important;
		box-sizing: border-box;
	}

	.region {
		height: 500rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: row;

		.country {
			flex: 1;
		}

		.province {
			flex: 1;
			// overflow: scroll;
		}

		.city {
			display: grid;
			grid-template-columns: repeat(3, 103rpx);
			justify-content: space-around;
			overflow: scroll;
			padding-bottom: 20rpx;

			view {
				margin-top: 20rpx;
				width: 103rpx;
				height: auto;
				padding: 5px 0px 5px 5px;
				text-wrap: normal;
				background: #EEEEEE;
				border-radius: 14rpx;
				font-size: $my-font-size21;
				font-weight: 400;
				color: #000000;
				line-height: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				word-break: break-word;
			}
		}

	}

	.currCity {
		color: #FFFFFF !important;
		background-color: #F47F37 !important;
	}
</style>